<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>配送员中心</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<!--<link rel="stylesheet" href="css/zrxCourierCentre.css" />-->
		<style>
			*{
				margin: 0px;
			    padding: 0px;
			}
			#portrait{
				background-size: 100% 100%;
				background-image: url(img/zhangsan.png);
				background-repeat: no-repeat;
				width: 100px;
				height: 100px;
				border:5px  ;
				z-index: 0px;
				border-radius: 50%;
				position: absolute;
				margin: 10px;
			}
			#portraitimg{
				display: flex;
				background-color: #23CAD0;
				height: 150px;
			}
			#message{
				margin-top: 30px;
				margin-left: 130px;
			}
			#message li{
				list-style: none;
				color: white;
			}
			#gengphone{
				margin-left: 50px;
			}
			#portraitimg h5{
				margin-top: 110px;
				color: white;
			}
			#centre{
				margin-top:20px ;
				/*margin-left: 20px;*/
				
			}
			#centrelist li{
				display: flex;
			}
			#img1{
				color: #F8A577;
			}
			#img2{
				color: #F8A577;
			}
			#img3{
				color: #F8A577;
			}
			#img4{
				color: #F8A577;
			}
			#binding1{
				color: #F8A577;
			}
			#monery2{
				color: #F8A577;
			}
			#monery3{
				color: #F8A577;
			}
			#monery4{
				color: #F8A577;
			}
		</style>
	</head>

	<body>
		<!-- 配送员中心 -->
	   
	      <div id="portraitimg">
	      	 <div id="portrait">
	       	 </div><br /> 
	       	<ul id="message">
	       		<li><h4>张三</h4></li>
	       		<li><h4>136****6587</h4></li>
	       	</ul>
	       	 <p id="gengphone"><h5>更换手机号</h5></p>
	      </div>
		<section id="centre">
			
			<ul class="mui-table-view" id="centrelist">
				<li class="mui-table-view-cell">
					<a  href="#">
						<span class="mui-icon mui-icon-compose" id="img1"></span>
						<span>&nbsp;我的银行卡&nbsp;&nbsp;&nbsp;&nbsp;
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							&nbsp;&nbsp;
							<a href="#" class="mui-navigate-right" id="binding1" >
								需绑定&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></span>
					</a>
				</li>
				<li class="mui-table-view-cell" style="background-color: #F7F7F7;">									
				</li>
				<li class="mui-table-view-cell">
					<a href="#">
						<span class="mui-icon mui-icon-flag" id="img2"></span> 
						<span>&nbsp;账户余额&nbsp;&nbsp;&nbsp;&nbsp;
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							<a href="#" id="binding2">
								<span id="monery2">120.00</span>可提现</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
								<span class="mui-navigate-right"></span>
							</a>
						</span>
					</a>
				</li>
				<li class="mui-table-view-cell" style="background-color: #F7F7F7;">									
				</li>
				<li class="mui-table-view-cell">
				    <a href="#" >
				    	<span class="mui-icon mui-icon-paperplane" id="img3"></span>
				    	<span>&nbsp;我的订单&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				    		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				    		&nbsp;&nbsp;&nbsp;
				    		<a href="#" id="binding3">
				    			<span id="monery3">35</span>单正在配送中&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
								<span class="mui-navigate-right"></span>
				    		</a>
				    	</span>
					
				    </a>
				</li>
				<li class="mui-table-view-cell" style="background-color: #F7F7F7;">									
				</li>
				<li class="mui-table-view-cell">
				    <a href="#" >
				    	<span class="mui-icon mui-icon-chatbubble" id="img4"></span>
				    	<span>&nbsp;我收到的评价&nbsp;&nbsp;&nbsp;&nbsp;
				    		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				    		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				    		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				    		<a href="#" id="binding4">
				    			<span id="monery4">142</span>条&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
								<span class="mui-navigate-right"></span>
				    		</a>
				    	</span>
				    </a>
				</li>
			</ul>
		</section>
		
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
	</body>

</html>